<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 
%>
<!DOCTYPE HTML>
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>启动页列表</title>
	<link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
<style type="text/css">

ul{
    list-style-type: none;
}
 .breadcrumb{
          padding: 21px 25px;
       }  
 a{
    color: #2a3f54;
}    
a>span{
 color: #337ab7;
}   
 .addbr{
     float: right;
    margin-right: 80px;
  }
  .pad{
    padding-left:15px;
    padding-top:10px;
  }
  .im{
     padding:10px;
  }
 
.glyphicon-plus:before{
    color: #CCC;
}
.btn1{
    margin-top: 10px;
}
input{
    margin-top: 8px;
}
select{
margin-top: 8px;
}
.edui-container{
    margin-top: 8px;
} 
  #filediv{
  border: 2px solid #ccc6c6;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    margin-right: 20px;
  }
  #filediv1{
  border: 2px solid #ccc6c6;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    margin-right: 20px;
  }
</style>

</head>
<body>
    <div class="row base-margin" id="query">
        <ul class="breadcrumb">
				<li style="padding-left: 15px"><i class="icon-home home-icon"></i> <a href="javascript:void(0)">System Settings(系统设置)</a>
				</li>
				<li class="active">
				<a href="view/sys/guide_page_list.jsp">Loading Page(引导页管理)</a></li>
        </ul>
        <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
           
           <div class="form-group">  
                <label for="bName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Title(图片标题):</label> 
                <input type="text" class="form-control"  id="title" />
            </div>   
            <div class="form-group">
                <button type="button" id="queryBtn" onclick="doQuery1('demo-table',queryParams1());" class="btn btn-primary">Search(搜索)</button>
           <button type="button" id="queryBtn" style="margin-left:50px" onclick="updates('');" class="btn btn-primary">Add(添加)</button>
            </div> 
                
        </form>
    </div>
    <div class="container" style="width: 100%;margin-top:15px">
        <table id="demo-table">
        </table>
    </div>
</body>
	<!-- 加载需要的js -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="js/jquery-bootstrap-pagination.js"></script>
	<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<!--时间  -->
	<script src="js/bootstrap-datetimepicker.js"></script>
	<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="js/common.js"></script>
	<script src="plugin/layer/layer.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function () {
		initPath("<%=basePath%>");
	    initTable('demo-table',queryParams,columns,"advertisingManager/getList");
	});
	
var  columns= [ 
	{ field : '',  title : 'Serial Number(序号)',  align : 'center', valign : 'middle',formatter:function(value,row,index){return index+1;}},
	/* { field : 'type',  title : '归宿端口',  align : 'center', valign : 'middle' ,formatter:function(value,row,index){
		 var str="";
		 if(value==1){
			 str="用户端启动页";
		 }else if(value==2){
			 str="司机端引导页";
		 }else if(value==3){
			 str="司机端启动页";
		 }else if(value==4){
			 str="用户端引导页";
		 }
		 return str;
	 } },*/
	 { field : 'title',  title : 'Title(图片标题)',  align : 'center', valign : 'middle' },
	 { field : 'createTime',  title : 'Creation time(时间)',  align : 'center', valign : 'middle',formatter:timeDateString },
	 { field : 'url',  title : 'Link address(链接地址)',  align : 'center', valign : 'middle' },
	 { field : 'status',  title : 'Status(状态)',  align : 'center', valign : 'middle',formatter:function(value,row,index){
		 return value=="0"?"Disabled":"Enabled";
	 } },
     {  field : 'createTime',  title : 'Operation(操作)', align : 'center', valign : 'middle',formatter:operateFormatter  },
     
	 ];
function operateFormatter(value, row, index) {//赋予的参数	
	sessionStorage.setItem('gp'+row.id, JSON.stringify(row));//存值
	console.log(row);
	return [
		 '<a  href="javascript:void(0)" onclick="updates(\''+ row.id+ '\')" > <span>Update</span></a>',
		 '<span> &nbsp;&nbsp; </span>',
		 '<a  href="javascript:void(0)" onclick="del(\''+ row.id+ '\')" > <span>Detele</span></a>',
		 '<span> &nbsp;&nbsp; </span>'
	].join('');
	}

function updates(id){
	var title="";var name="";var str="";var url="";
	if(id==""){
		id="";
		title="Add Loading";
	}else{
		title="Update Loading";	
		 var local = JSON.parse(sessionStorage.getItem('gp'+id));
		 id=local.id;
		 name=local.title;
		 url=local.url;
		  str+='  <tr class="padtr"><td class="pad">文件路径:</td> '+
		  ' <td style="padding: 10px 20px;"><span>'+url+'</span></td></tr>';
	}
	layer.open({
		  type: 1,
		  title: "",
		  skin: 'layui-layer-rim', //加上边框
		  area: ['620px', '560px'], //宽高
		  content: ' <form id="adds"><table>'+
		  '  <tr class="padtr"><td class="pad">选择端口:</td> '+
	       '<td><select id="type" class="form-control"><option value="4">用户端</option></select></td></tr>'+
		  '  <tr class="padtr"><td class="pad">Title(图片标题):</td> '+
   '<td><input type="text" class="form-control" name="title" id="title1" value="'+name+'"  placeholder="请输入图片标题"><input type="hidden" id="ids" name="id" value="'+id+'" /></td></tr>'+
 /*  '  <tr class="padtr"><td class="pad">图片:</td> '+
  ' <td style="padding: 10px 20px;"><div id="filedivs1" ><label for="file1" ><div id="filediv1" ><span class="glyphicon glyphicon-plus im"></span></div>'+
  '<input type="file" id="file1"  onchange="fileSize(this,1)" accept="image/jpeg,image/jpg,image/png" style="display:none"/>  </label></div>'+
  '<input type="hidden" id="result1" /><img src="" style="width:50px;height:50px;display:none" onclick="javascript:$(\'#file1\').click()" id="imgs1"/>'+
  '</td></tr>'+ */
  '  <tr class="padtr"><td class="pad">file(文件):</td> '+
  ' <td style="padding: 10px 20px;"><input type="file" id="file1" onchange="fileSize(this,1)"/>'+
  '<input type="hidden" id="result1"/></td></tr>'+
  +str+
   '  <tr class="padtr"><td class="pad">Status(状态):</td> '+
   '<td><select id="status"name="status" class="form-control"> <option value="1">Enabled</option> <option value="2">Disabled</option></select></td></tr>'+
   '</tr> '+
   ' '+
   '<tr align="center" class="padtr"><td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
   ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
   ' <button type="button" onclick="saves()" class="btn btn-info btn1">&nbsp;Save&nbsp;&nbsp;</button>'+
   '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
   '<button type="button" onclick="cacel()" class="btn btn-info btn1">&nbsp;&nbsp;取&nbsp;消&nbsp;&nbsp;</button></td></tr></table></form>'
		});
	if(id!=""){
		 var local = JSON.parse(sessionStorage.getItem('gp'+id));
		$('#type').val(local.type);
		$('#status').val(local.status);
	}
}
function saves(){
	var id=$('#id').val();
	var type=$('#type').val();
	var status=$('#status').val();
	var title=$('#title1').val();
	var result=$('#result1').val();
	if(id!=""){
		if(result==""){
			result=null;
		 } 	
	}else{
		if(result==""){
			 alert("封面不能为空!");
		  	   return;
		 } 
	}
	var data={"id":id,"type":type,"status":status,"title":title,"picture":result,"url":result};
	console.log(data);
		 $.ajax({
          type: "post",
          url: "advertisingManager/addOrUpdate",
          data: JSON.stringify(data),
          contentType:"application/json;charset=UTF-8", 
          dataType:"json",
          success: function(data){    	            	 
         if(data.code==200){
       	 layer.closeAll();
       	  $('#demo-table').bootstrapTable('refreshOptions',queryParams());
       	  layer.msg("保存成功");
   	       }else{
   	    	    layer.msg(data.msg);
   	       }
                   }
      }); 
}
//点击div时点击file
function fileSize(obj,num){
	 /* var image = new Image();
	 var _URL = window.URL || window.webkitURL;
	 var width =0; var height = 0;
       image.onload =function(){  
         width = image.width;  
         height = image.height;
         $('#filedivs'+num+'').css("display","none");
	      $('#imgs'+num+'').css("display","block");
	      $('#imgs'+num+'').attr("src",image.src);
      }   
    	 // image.src =  _URL.createObjectURL(file.files[0]);
		    var reader = new FileReader();  
		    //将文件以Data URL形式读入页面  
		    reader.readAsDataURL(file.files[0]);  
		    reader.onload=function(e){  
		    	var r = "result"+num+"";
		        var result=document.getElementById(r);  
		        //显示文件  
		        result.value=this.result;  
      } */
      
      console.log(obj.files[0])
      
	var formdata = new FormData();
    formdata.append("file", obj.files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(e) {
      //console.log('e.loaded=' + e.loaded + 'e.total=' + e.total);
      console.log(e)
    }, false);
    // 完成
    xhr.addEventListener("load", function(e) {
      console.log(xhr.responseText) //返回信息
      myfile(xhr.responseText)
      /* self.createRusultDom(xhr.responseText) */
    }, false);
    // 错误
    xhr.addEventListener("error", function(e) {
      // self.onFailure(file, xhr.responseText);
    }, false);

    xhr.open("POST", 'http://13.211.3.148:8080/fab_api/pcphoto/pcphotoImg', true);
    xhr.setRequestHeader("X_FILENAME", 'src');
    xhr.send(formdata);
}


function myfile(res){
	if(res!=""){
		var response=JSON.parse(res);
	    $('#result1').val(response.data);
	}
}
	function del(id){
		var  flag =  confirm("Are you sure you want to delete?");	
		  if(flag){
				 $.ajax({
			            type: "get",
			            url: "advertisingManager/del",
			            data:{"id":id},
			            success: function(data){    
			           	  console.log(data)
			          	  if(data.code==200){	 
			          		$('#demo-table').bootstrapTable('refreshOptions',queryParams());
				        	 }else{
				        		  layer.msg(data.msg); 
				        	 }
			       }
			        }); 
		  }
	}
function cacel(){
	layer.closeAll();
}
	function queryParams(params) {
		 console.log(params);  
	    var param = {
	    	title:$('#title').val(), 
	    	type:2,
	        pageNo : this.pageNumber,
	        pageSize : this.pageSize
	    }	
	    return param;
	} 
	function queryParams1(){
		 var param = {
				title:$('#title').val(), 
				type:2,
		        pageNo : 1,
		        pageSize : this.pageSize
		    }	
		    return param;
	}
	</script>
</html>


